<template>
  <div class="system_container">
    <div class="system_wrapper">
      <!-- 头部标题 -->
      <div class="header">
        <h1 style="font-weight: bolder">人云联拓·医疗智能体提供决策解决方案</h1>
        <div class="sub_title">基于医疗领域人工智能技术，为医疗机构提供精准性决策支持，推动医疗服务全面质量提升</div>
        <div class="tags">
          <div class="tag">
            <img class="icon" src="@/assets/main_app/智慧医疗.png" alt="">
            <div class="text">智慧医疗</div>
          </div>
          <div class="tag">
            <img class="icon" src="@/assets/main_app/精准管理.png" alt="">
            <div>精准管理</div>
          </div>
          <div class="tag">
            <img class="icon" src="@/assets/main_app/辅助决策.png" alt="">
            <div>辅助决策</div>
          </div>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="main-content">
        <!-- 动态渲染组件 -->
        <component :is="currentComponent" @switch-view="handleSwitchView" class="form-container"/>
      </div>
      <!-- 底部信息 -->
      <div class="footer">
        <p>© 2025 人云控股有限公司 版权所有</p>
        <p>客服热线：440-7766-555 | 官网：www.whitest.com</p>
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {ref, shallowRef} from "vue";
import LoginComponent from '../component/LoginComponent.vue';
import ForgetComponent from '../component/ForgetComponent.vue';
import RegisterComponent from '../component/RegisterComponent.vue';
const currentComponent = shallowRef(LoginComponent);
const componentMap = {
  LoginComponent: LoginComponent,
  ForgetComponent: ForgetComponent,
  RegisterComponent: RegisterComponent
};
const handleSwitchView = (componentName) => {
  currentComponent.value = componentMap[componentName] || LoginComponent;
};

</script>

<style lang="scss" scoped>
.system_container {
  font-family: 'Microsoft YaHei', sans-serif;
  max-height: 100vh;
  height: 100%;
  overflow-y: scroll;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/static/loginImg.png");
  background-size: 100% 100%; /* 覆盖整个容器 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  .system_wrapper {
    background-color: white;
    border-radius: 10px;
    padding: 30px 80px;
    .header {
      text-align: center;
      .sub_title {
        color: #6b727d;
        font-size: 14px;
        padding: 10px 0;
      }
      .tags {
        padding: 0 0 30px 0;
        display: flex;
        justify-content: center;
        font-weight: bolder;
        .tag {
          padding: 0 20px;
          display: flex;
          align-items: center;
          color: #5f6168;
          .icon{
            display: block;
            height: 25px;
            margin: 0 10px;
          }
        }
      }
    }
    .main-content {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      gap: 20px;
    }
    .footer {
      text-align: center;
      margin-top: 30px;
      color: #666;
      font-size: 12px;
      p {
        margin: 5px 0;
      }
    }
  }
}
.form-container {
  width: 620px;
}
/* 隐藏滚动条 - 适用于整个页面 */
::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 针对IE, Edge和Firefox的设置 */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
:deep(.el-checkbox__inner) {
  box-shadow: none !important;
  border: 1px solid #43A2A3 !important;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
  color: #43A2A3;
}
:deep(.el-button) {
  border: none !important;
  box-shadow: none !important;
}
</style>
